<template> 
  <view>
    <button plain class="address" @click="openPicker">点击我选择你的地址</button>
    <text class="city" style="font-size:18px" v-if="lotusAddressData.provinceName && lotusAddressData.cityName && lotusAddressData.townName">
      我的地址:{{lotusAddressData.provinceName}}--{{lotusAddressData.cityName}}--{{lotusAddressData.townName}}
    </text>
    <lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
  </view>
</template>

<script>
import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
export default {
  components:{
    "lotus-address":lotusAddress
  },
  data() {
    return{
    lotusAddressData:{
      visible:false,
      provinceName:'',
      cityName:'',
      townName:'',
      },
      region:'',
     
    }
  },
  methods:{
    openPicker() {
            this.lotusAddressData.visible = true;
            this.lotusAddressData.provinceName = '广东省';
            this.lotusAddressData.cityName = '广州市';
            this.lotusAddressData.townName = '白云区';
        },
    //回传已选的省市区的值
    choseValue(res){
        //res数据源包括已选省市区与省市区code
        console.log(res);
        

        /*
        {province: "广东省", provinceCode: "440000", city: "广州市", cityCode: "440100", town: "花都区", …}
        */
        // console.log(that.$store.state.address);
        this.$store.state.address = res.province+res.city+res.town;
        console.log(this.$store.state.address);
        this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
        //res.isChose = 1省市区已选 res.isChose = 0;未选
        if(res.isChose){
            this.lotusAddressData.provinceName = res.province;//省
            this.lotusAddressData.cityName = res.city;//市
            this.lotusAddressData.townName = res.town;//区
            this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
        }
    },
    bindPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.index = e.target.value
  },
  }
};
</script>
<style scoped>
  .address {
    width: 100%;
    height: 100rpx;
    margin: 30px 0;
    border-radius: 20rpx;
    border: 1px solid lightgreen;
  }
  .city {
    margin-left: 20rpx;
  }
</style>